<template>
  <div id="bingmap-container"></div>
</template>
<script>
import * as Cesium from 'cesium';
export default {
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer('bingmap-container', {
      baseLayerPicker: false, // 地图选择按钮
      geocoder: false, // 搜索按钮，
      homeButton: false, // 跳转主页按钮
      animation: false, // 动画按钮
      creditsDisplay: false, //
      timeline: false, // 时间轴按钮
      fullscreenButton: false, // 全屏功能显示按钮
      scene3DOnly: false,
      navigationHelpButton: false, // 操作帮助按钮
      infoBox: true,
      selectionIndicator: false,
      sceneModePicker: false, // 是否开启平面图选择
      terrainShadows: Cesium.ShadowMode.DISABLED,
      shouldAnimate: true
    });
    // 设置初始位置
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(110.2, 34.55, 20000000)
    });
    //  去除水印
    viewer._cesiumWidget._creditContainer.style.display = 'none';
    // 高德标注
    viewer.imageryLayers.addImageryProvider(
      new Cesium.UrlTemplateImageryProvider({
        url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
      })
    );

    const scene = viewer.scene;
    // 加载模型
    var tileset = scene.primitives.add(
      new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(8564)
      })
    );

    // 加载 3dtiles
    tileset.readyPromise
      .then(function (tileset) {
        // 相机指向 实体
        viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, tileset.boundingSphere.radius * 3.2));
      })
      .otherwise(function (error) {
        console.log(error);
      });

    tileset.colorBlendMode = Cesium.Cesium3DTileColorBlendMode.REPLACE;

    // ------------------ 设置选中高亮----------------------------------------

    var selectedFeature;
    var picking = true;

    function selectFeature(feature) {
      var element = feature.getProperty('element');
      setElementColor(element, Cesium.Color.ORANGE);
      selectedFeature = feature;
    }

    function unselectFeature(feature) {
      if (!Cesium.defined(feature)) {
        return;
      }
      var element = feature.getProperty('element');
      setElementColor(element, Cesium.Color.WHITE);
      if (feature === selectedFeature) {
        selectedFeature = undefined;
      }
    }

    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    handler.setInputAction(function (movement) {
      if (!picking) {
        return;
      }

      var feature = scene.pick(movement.endPosition);

      unselectFeature(selectedFeature);

      if (feature instanceof Cesium.Cesium3DTileFeature) {
        selectFeature(feature);
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    // In this tileset every feature has an "element" property which is a global ID.
    // This property is used to associate features across different tiles and LODs.
    // Workaround until 3D Tiles has the concept of global batch ids: https://github.com/CesiumGS/3d-tiles/issues/265
    var elementMap = {}; // Build a map of elements to features.
    var hiddenElements = [
      112001, 113180, 131136, 113167, 71309, 109652, 111178, 113156, 113170, 124846, 114076, 131122, 113179, 114325,
      131134, 113164, 113153, 113179, 109656, 114095, 114093, 39225, 39267, 113149, 113071, 112003, 39229, 113160,
      39227, 39234, 113985, 39230, 112004, 39223
    ];

    function getElement(feature) {
      return parseInt(feature.getProperty('element'), 10);
    }

    function setElementColor(element, color) {
      var featuresToColor = elementMap[element]; // 获取鼠标箭头指定的 3dtitl
      var length = featuresToColor.length;
      for (var i = 0; i < length; ++i) {
        var feature = featuresToColor[i];
        feature.color = Cesium.Color.clone(color, feature.color);
      }
    }

    function unloadFeature(feature) {
      unselectFeature(feature);
      var element = getElement(feature);
      var features = elementMap[element];
      var index = features.indexOf(feature);
      if (index > -1) {
        features.splice(index, 1);
      }
    }

    function loadFeature(feature) {
      var element = getElement(feature);
      var features = elementMap[element];
      if (!Cesium.defined(features)) {
        features = [];
        elementMap[element] = features;
      }
      // 记录feature
      features.push(feature);

      if (hiddenElements.indexOf(element) > -1) {
        feature.show = false;
      }
    }

    function processContentFeatures(content, callback) {
      var featuresLength = content.featuresLength;
      for (var i = 0; i < featuresLength; ++i) {
        var feature = content.getFeature(i);
        callback(feature);
      }
    }

    function processTileFeatures(tile, callback) {
      var content = tile.content;
      var innerContents = content.innerContents;
      if (Cesium.defined(innerContents)) {
        var length = innerContents.length;
        for (var i = 0; i < length; ++i) {
          processContentFeatures(innerContents[i], callback);
        }
      } else {
        processContentFeatures(content, callback);
      }
    }

    tileset.tileLoad.addEventListener(function (tile) {
      // titles 加载完  记录面
      processTileFeatures(tile, loadFeature);
    });

    tileset.tileUnload.addEventListener(function (tile) {
      // titles 卸载  清除记录
      processTileFeatures(tile, unloadFeature);
    });
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
#bingmap-container {
  height: 100%;
  position: relative;
  cursor: crosshair;
}
</style>
